<template>
  <el-menu
    :default-active="'/index'"
    router
    mode="horizontal"
    background-color="white"
    text-color="#222"
    active-text-color="#409EFF"
    style="min-width: 1300px"
    class="header">
    <el-submenu index="/bank/questions">
      <template slot="title">题库</template>
      <el-menu-item index="/bank/questions">全部题目</el-menu-item>
      <el-menu-item index="/bank/personalBank">我的题库</el-menu-item>
    </el-submenu>
    <el-menu-item index="/exam/examManage">考试</el-menu-item>
    <el-menu-item index="/mark/examForPaper">批阅</el-menu-item>
    <el-menu-item index="/analysis/examForAnalysis">统计</el-menu-item>
    <el-popover
      ref="popover"
      placement="bottom"
      width="200"
      trigger="manual"
      v-model="visible">
<!--   查看信息   -->
      <div v-if="change === false">
        <div>
          <p>账号：{{ userInfo.teacherNumber }}</p>
          <p>学院：{{ userInfo.house }}</p>
        </div>
        <div>
          <el-button type="primary" @click="change = true" style="margin-left: 40%">修改</el-button>
        </div>
      </div>
<!--   修改信息   -->
      <el-form ref="form" :model="userForm" size="mini" v-if="change === true">
        <el-form-item label="姓名">
          <el-input v-model="userForm.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" style="margin-left: 20%">完成</el-button>
          <el-button @click="change = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-popover>
    <i v-popover:popover @click="visible = !visible" class="el-icon-user-solid icon"></i>
    <span class="title">教考分离系统</span>
  </el-menu>
</template>

<script>
import {completeInfo} from '../api/adminManage'

export default {
  name: 'NavMenu',
  data () {
    return {
      visible: false,
      change: false,
      userInfo: {
        id: sessionStorage.getItem('teacherId'),
        teacherNumber: sessionStorage.getItem('teacherNumber'),
        house: sessionStorage.getItem('teacherHouse')
      },
      userForm: {
        name: ''
      }
    }
  },
  methods: {
    onSubmit () {
      completeInfo({name: this.userForm.name, teacherNumber: this.userInfo.teacherNumber}).then(res => {
        console.log(res.data)
        if (res.data.errorCode === 0) {
          this.$message.success('修改成功')
        } else {
          this.$message.error(res.data.message)
        }
      })
      this.change = false
    }
  }
}
</script>

<style scoped>
  .header {
    min-width: 1300px;
    text-color: #222;
    position: fixed;
    top:0;
    width: 100%;
    height: 60px;
    z-index: 1000;
  }

  a{
    text-decoration: none;
  }

  span {
    pointer-events: none;
  }

  .my {
    color: #222;
    float: right;
    padding: 20px;
  }

  .title {
    position: absolute;
    padding-top: 20px;
    right: 46%;
    font-size: 20px;
    font-weight: bold;
  }

  .icon {
    float:right;
    font-size: 30px;
    color: #222;
    padding-top: 15px;
    margin-right: 20px;
  }
</style>
